<template>
  <div class="doctor-detail-page">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/admin/doctor-list">医生管理</el-breadcrumb-item>
      <el-breadcrumb-item>医生详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" @click="goBack" icon="el-icon-back" class="back-btn">返回医生列表</el-button>
    <el-card class="doctor-base-info">
      <div class="doctor-info-flex">
        <el-avatar :src="doctor.photo" size="large" style="margin-right:32px;" />
        <div class="info-list">
          <div><b>姓名：</b>{{ doctor.name }}</div>
          <div><b>性别：</b>{{ doctor.gender }}</div>
          <div><b>科室：</b>{{ doctor.departmentName }}</div>
          <div><b>职称：</b>{{ doctor.title }}</div>
          <div><b>手机号：</b>{{ doctor.phone }}</div>
          <div><b>状态：</b><el-tag :type="doctor.status === 'active' ? 'success' : 'info'">{{ doctor.status === 'active' ? '启用' : '禁用' }}</el-tag></div>
        </div>
      </div>
    </el-card>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="base">
        <div class="tab-content">
          <div><b>个人简介：</b>{{ doctor.intro || '暂无简介' }}</div>
          <div style="margin-top:8px"><b>擅长：</b>{{ doctor.goodAt || '暂无信息' }}</div>
          <div style="margin-top:8px"><b>证件：</b>
            <el-image v-for="(img,idx) in certImagesFiltered" :key="idx" :src="img" style="width:80px;height:80px;margin-right:8px;" fit="cover" />
            <span v-if="certImagesFiltered.length===0">暂无证件图片</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="排班信息" name="schedule">
        <div class="tab-content">
          <el-table :data="scheduleList" style="width:100%" border>
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="time" label="时间段" width="120" />
            <el-table-column prop="department" label="科室" width="120" />
            <el-table-column prop="desc" label="备注" />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史接诊" name="visit">
        <div class="tab-content">
          <el-table :data="visitList" style="width:100%" border>
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="patient" label="患者" width="120" />
            <el-table-column prop="diagnosis" label="诊断" width="180" />
            <el-table-column prop="type" label="类型" width="100">
              <template #default="{ row }">
                <el-tag :type="row.type==='挂号'?'info':'success'">{{ row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status==='已完成'?'success':row.status==='待就诊'?'warning':'info'">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="desc" label="备注" />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="评价/评分" name="review">
        <div class="tab-content">
          <el-table :data="reviewList" style="width:100%" border>
            <el-table-column prop="patient" label="患者" width="120" />
            <el-table-column prop="content" label="评价内容" />
            <el-table-column prop="score" label="评分" width="100">
              <template #default="{ row }">
                <el-rate v-model="row.score" disabled show-score />
              </template>
            </el-table-column>
            <el-table-column prop="date" label="日期" width="160" />
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const doctor = ref<any>({})
const activeTab = ref('base')
const scheduleList = ref<any[]>([])
const visitList = ref<any[]>([])
const reviewList = ref<any[]>([])
const certImagesFiltered = computed(() => (doctor.value.certImages || []).filter(Boolean))
function goBack() {
  router.push('/admin/doctor-list')
}
onMounted(() => {
  // 模拟获取医生信息
  doctor.value = {
    id: route.params.id,
    name: '李明',
    gender: '男',
    departmentName: '内科',
    title: '主任医师',
    phone: '13812345678',
    status: 'active',
    photo: 'https://cdn.jsdelivr.net/gh/duogongneng/test-pic@master/doctor1.jpg',
    intro: '擅长内科常见病、多发病的诊治。',
    goodAt: '高血压、糖尿病、心血管疾病',
    certImages: [
      'https://cdn.jsdelivr.net/gh/duogongneng/test-pic@master/cert1.jpg',
      'https://cdn.jsdelivr.net/gh/duogongneng/test-pic@master/cert2.jpg'
    ]
  }
  scheduleList.value = [
    { date: '2024-06-01', time: '上午', department: '内科', desc: '门诊' },
    { date: '2024-06-01', time: '下午', department: '内科', desc: '专家门诊' },
    { date: '2024-06-02', time: '上午', department: '内科', desc: '门诊' }
  ]
  visitList.value = [
    { date: '2024-05-01', patient: '张三', diagnosis: '感冒', type: '挂号', status: '已完成', desc: '普通门诊' },
    { date: '2024-05-10', patient: '李四', diagnosis: '高血压', type: '就诊', status: '已完成', desc: '高血压复诊' },
    { date: '2024-05-15', patient: '王五', diagnosis: '糖尿病', type: '挂号', status: '待就诊', desc: '慢病管理' }
  ]
  reviewList.value = [
    { patient: '张三', content: '医生很专业，态度好', score: 5, date: '2024-05-01' },
    { patient: '李四', content: '解答细致', score: 4, date: '2024-05-02' }
  ]
})
</script>
<style scoped>
.doctor-detail-page {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin: 10px 0;
}
.doctor-base-info {
  margin-bottom: 18px;
}
.doctor-info-flex {
  display: flex;
  align-items: flex-start;
}
.info-list > div {
  margin-bottom: 6px;
}
.back-btn {
  margin: 12px 0 18px 0;
}
.tab-content {
  min-height: 80px;
  color: #555;
  padding: 12px 0;
}
</style> 